<template>
  <div>
    <p>改变模型相对于局部坐标原点的位置</p>
    <div class="three_box"></div>
  </div>
</template>

<script setup>
import { h, nextTick } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
nextTick(() => {
  let Dom = document.querySelector(".three_box");
  let width = Dom.offsetWidth;
  let height = Dom.offsetHeight;
  // 场景
  let scene = new THREE.Scene();
  // 局部坐标
  let xyz = new THREE.AxesHelper(100);
  scene.add(xyz);
  // 几何
  const geo = new THREE.BoxGeometry(50, 50, 50);
  // 材质
  const material = new THREE.MeshPhongMaterial({
    color: 0x00ffff,
  });
  //   模型对象
  const mesh = new THREE.Mesh(geo, material);
  let smallXyz = xyz.clone();
  mesh.add(smallXyz);
  mesh.position.set(50, 0, 0);
  // 组
  let group = new THREE.Group();
  group.position.set(50, 0, 50);
  group.add(mesh);

  //   光源
  let pointLight = new THREE.PointLight(0xffffff, 1);
  pointLight.position.set(200, 200, 200);
  pointLight.lookAt(group.position);
  scene.add(pointLight);

  let amLight = new THREE.AmbientLight(0xffffff);
  scene.add(amLight);

  let dirLight = new THREE.DirectionalLight(0xffffff);
  dirLight.position.set(200, -200, 200);
  dirLight.lookAt(group.position);
  scene.add(dirLight);
  //   相机
  let camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 3000);
  camera.position.set(200, 200, 200);
  camera.lookAt(mesh.position);
  //   渲染器
  let renderer = new THREE.WebGLRenderer({
    antialias: true,
  });
  renderer.setSize(width, height);
  Dom.appendChild(renderer.domElement);
  //   相机控件
  const controls = new OrbitControls(camera, renderer.domElement);
  //   controls.addEventListener("change", function () {
  //     renderer.render(scene, camera);
  //   });

  //   renderer.render(scene, camera);
  mesh.geometry.translate(50 / 2, 0, 0);
  scene.add(group);
  function rotate() {
    mesh.rotateY(0.005);
    renderer.render(scene, camera);
    requestAnimationFrame(rotate);
  }
  rotate();
});
</script>

<style  scoped>
.three_box {
  width: 60vw;
  height: 60vh;
}
</style>